<template>
  <view class="goods_list">
    <view class="goods_list_box" v-for="(item,index) in goodsList" :key="index" @click="gotoDetail(item)">
      <view class="left_image">
        <image :src="item.goods_small_logo" mode=""></image>
      </view>
      <view class="right">
        <text class="right_title">{{item.goods_name}}</text>
        <text class="right_price">￥{{item.goods_price}}.00</text>
      </view>
    </view>
    <view style="text-align: center;" v-if="status === 2">
      -----------没有数据拉----------
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 需要请求的数据
        queryObj: {
          query: '',
          // 收集传过来的id
          cid: '',
          // 显示第一页
          pagenum: 1,
          // 一页多少条数据
          pagesize: 10
        },
        // 发送请求后存储数据
        goodsList: [],
        // 总数量
        total: 0,
        status: 1, // 用来存储4种状态, 1----有数据,2----没有数据,3----报错,4----正在加载
      };
    },
    onLoad(option) {
      this.queryObj.query = option.query || ''
      this.queryObj.cid = option.cid || ''
      this.getGoodsList()
    },
    onReachBottom(){
      this.status === 1 &&this.getGoodsList()
    },
    methods: {
      // 获取页面数据
      async getGoodsList() {
        // 接口调用前先设定状态为加载
        const result = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
        // this.queryObj.cid = result.data.message.goods.goods_id
        if (result.data.meta.status !== 200) {
          this.status = 3 // 没有数据
          return
        }
        // =====代码执行到这里====一定是成功的,
        // 如果条数是10条,一定有数据, 状态为1
        // 如果条数小于10,说明是最后一页,以后就没有数据了
        if (result.data.message.goods.length === 0) {
          this.status = 2
          return
        }
        // 有数据或者即将没有数据,都重新更新一次状态
        this.status = result.data.message.goods.length < this.queryObj.pagesize ? 2 : 1
        // 一条一条插进去
        this.goodsList.push(...result.data.message.goods)
        // 每一次增加10条
        this.queryObj.pagenum = ++this.queryObj.pagenum
      },
      // 点击跳转
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?cid=' + item.goods_id
        })
      }
    }
  }
</script>

<style lang="scss">
  .goods_list {
    .goods_list_box {
      display: flex;
      height: 260rpx;
      width: 100%;
      border-bottom: 2rpx solid gray;
      margin-bottom: 30rpx;

      .left_image {
        width: 40%;
        height: 100%;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        position: relative;

        .right_title {
          font-size: 28rpx;
        }

        .right_price {
          position: absolute;
          left: 10rpx;
          bottom: 30rpx;
          color: red;
        }
      }
    }
  }
</style>